<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns="">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="stylesheet" th:href="@{/static/css/home.css}"/>
    <!-- Bootstrap Css -->
    <link th:href="@{/static/css/bootstrap.min.css}" id="bootstrap-style" rel="stylesheet" type="text/css">
    <!-- Icons Css -->
    <link th:href="@{/static/css/icons.min.css}" rel="stylesheet" type="text/css">
    <!-- App Css-->
    <link th:href="@{/static/css/app.min.css}" id="app-style" rel="stylesheet" type="text/css">
</head>
<style>
    a {
        text-decoration: none;
        color: white;
    }

</style>

<body>
<div class="home" id="app" v-loading="loading">

    <div
            style="margin-left: 5px;display: flex;flex-direction: column;background-color: #FFFFFF;"
    >
        <div class="intro-title"
             style=""
        >平台简介
        </div>
        <div class="intro-info"
             style=""
        >
            <span style="font-size: 14px">【欢迎star和fork项目,请点击下方按钮访问】</span>

        </div>
        <div style="margin-left: 10px;margin-right: 10px;margin-top: 15px">
            <p style="font-size: 16px;color: #666666;line-height: 25px;text-indent: 3em; "> &nbsp;&nbsp;
                Easy-Admin是一套全部开源的快速开发平台，毫无保留给个人及企业免费使用，项目前后台不分离，一键生成前后台代码，中小企业快速开发脚手架。 前端采用Vue、Element UI、LayUi、
                后端采用Spring Boot、Redis &
                Jwt。 权限认证使用Jwt，支持多终端认证系统。 支持加载动态权限菜单，多方式轻松权限控制。 高效率开发，使用代码生成器可以一键生成前后端代码。


        </div>

    </div>
    <div class="main-content" v-loading="loading">
        <div class="page-content" style="margin-top: 1%">
            <div class="container-fluid">


                <div class="row">
                    <div class="col-xl-3 col-sm-6">
                        <div class="card mini-stat bg-primary">
                            <div class="card-body mini-stat-img">
                                <div class="mini-stat-icon">
                                    <i class="mdi mdi-account float-end"></i>
                                </div>
                                <div class="text-white">
                                    <h6 class="text-uppercase mb-3 font-size-16 text-white">用户量</h6>
                                    <h2 class="mb-4 text-white">1587</h2>
                                    <span class="badge bg-info"> +11% </span> <span
                                        class="ms-2">比昨日</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-sm-6">
                        <div class="card mini-stat bg-primary">
                            <div class="card-body mini-stat-img">
                                <div class="mini-stat-icon">
                                    <i class="mdi mdi-account-circle float-end"></i>
                                </div>
                                <div class="text-white">
                                    <h6 class="text-uppercase mb-3 font-size-16 text-white">访问量</h6>
                                    <h2 class="mb-4 text-white">46782</h2>
                                    <span class="badge bg-danger"> -29% </span> <span
                                        class="ms-2">比昨日</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-sm-6">
                        <div class="card mini-stat bg-primary">
                            <div class="card-body mini-stat-img">
                                <div class="mini-stat-icon">
                                    <i class="mdi mdi-clipboard-text float-end"></i>
                                </div>
                                <div class="text-white">
                                    <h6 class="text-uppercase mb-3 font-size-16 text-white">订单量</h6>
                                    <h2 class="mb-4 text-white">600</h2>
                                    <span class="badge bg-warning"> 0% </span> <span
                                        class="ms-2">比昨日</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-sm-6">
                        <div class="card mini-stat bg-primary">
                            <div class="card-body mini-stat-img">
                                <div class="mini-stat-icon">
                                    <i class="mdi mdi-square-inc-cash float-end"></i>
                                </div>
                                <div class="text-white">
                                    <h6 class="text-uppercase mb-3 font-size-16 text-white">收入</h6>
                                    <h2 class="mb-4 text-white">1890</h2>
                                    <span class="badge bg-info"> +89% </span> <span
                                        class="ms-2">比昨日</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end row -->

                <div class="row">

                    <div class="col-xl-3">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title mb-4">月收入</h4>

                                <div class="row text-center mt-4">
                                    <div class="col-6">
                                        <h5 class="font-size-20">$56241</h5>
                                        <p class="text-muted">总支出</p>
                                    </div>
                                    <div class="col-6">
                                        <h5 class="font-size-20">$23651</h5>
                                        <p class="text-muted">总收入</p>
                                    </div>
                                </div>

                                <div id="morris-donut-example" class="morris-charts morris-charts-height"
                                     dir="ltr"></div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-6">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title mb-4">销售额</h4>

                                <div class="row text-center mt-4">
                                    <div class="col-4">
                                        <h5 class="font-size-20">$ 89425</h5>
                                        <p class="text-muted">总收入</p>
                                    </div>
                                    <div class="col-4">
                                        <h5 class="font-size-20">$ 56210</h5>
                                        <p class="text-muted">总支出</p>
                                    </div>
                                    <div class="col-4">
                                        <h5 class="font-size-20">$ 8974</h5>
                                        <p class="text-muted">上月销售额</p>
                                    </div>
                                </div>

                                <div id="morris-area-example" class="morris-charts morris-charts-height"
                                     dir="ltr"></div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-3">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title mb-4">营业额</h4>

                                <div class="row text-center mt-4">
                                    <div class="col-6">
                                        <h5 class="font-size-20">$ 2548</h5>
                                        <p class="text-muted">Marketplace</p>
                                    </div>
                                    <div class="col-6">
                                        <h5 class="font-size-20">$ 6985</h5>
                                        <p class="text-muted">Total Income</p>
                                    </div>
                                </div>

                                <div id="morris-bar-stacked" class="morris-charts morris-charts-height" dir="ltr"></div>
                            </div>
                        </div>
                    </div>

                </div>


            </div>
        </div>


    </div>

    <div
            style="display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;margin-left: 10px;margin-top: 10px">
        <div style="width: 30%;background-color: #FFFFFF;">
            <div class="intro-title">
                前端技术选型
            </div>
            <div
                    style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;margin-left: 20px;margin-right: 20px"
            >

                <div style="background-color: #ffffff;width: 80%;height: 200px;border-radius: 20px;margin-top: 10px">
                    <div style="text-align: center;margin-top: 20px;font-size: 16px;font-weight: bold">前端技术栈</div>
                    <br/>
                    <div style="margin-left: 20px;font-size: 14px">
                        * Vue<br/>
                        * LayUI<br/>
                        * css、html、js<br/>
                        * ElementUI<br/>
                        * Axios<br/>
                        * Flex响应式布局<br/>
                    </div>


                </div>
            </div>

        </div>


        <div style="width: 30%;background-color: #FFFFFF;">
            <div class="intro-title">
                后端技术选型
            </div>
            <div
                    style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;margin-left: 20px;margin-right: 20px"
            >
                <div style="background-color: #ffffff;width: 80%;height: 200px;border-radius: 20px;margin-top: 10px">
                    <div style="text-align: center;margin-top: 20px;font-size: 16px;font-weight: bold">后端技术栈</div>
                    <br/>
                    <div style="margin-left: 20px;font-size: 14px">
                        * Springboot快速开发<br/>
                        * 阿里云oss文件存储<br/>
                        * Mybatis-Plus-Join<br/>
                        * Knif4j在线接口文档<br/>
                        * Websocket站内信<br/>
                        * 一键部署、卸载代码<br/>
                    </div>


                </div>

            </div>

        </div>


        <div style="width: 30%;height: 250px;background-color: #FFFFFF;margin-left: 10px">
            <div class="intro-title">
                作者信息
            </div>
            <div class="concat-content">
                作者: 程序员Mars(抖音同名) 微信: v850994281
                <svg-icon style="width: 1.3em;height: 1.3em;color: white;margin-top: 4px;cursor: pointer"
                          icon-class="user-info"

                />
            </div>
            <div class="concat-content">
                <div style="display: flex;flex-direction: row;align-items: center;justify-content: space-between">
                    <div style="margin-right: 10%">
                        软件开发就选源码字节(app、小程序、网站等开发)
                    </div>
                </div>

            </div>

            <div class="concat-content">
                我的技术栈: Java、Python、Web、小程序、爬虫等
            </div>
            <div class="concat-content">
                项目: <a href="https://gitee.com/Marsfactory" target="_blank"><span
                    style="color: red;text-decoration: none">Easy-Admin中小企业快速开发脚手架</span></a>
            </div>
            <div
                    style="margin-left: 20%;margin-right: 20%;display: flex;flex-direction: row;align-items: center;justify-content: space-between"
            >

            </div>

        </div>

    </div>


    <el-divider/>
</div>
</body>

<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/js/axios.min.js}"></script>
<script th:src="@{/static/js/request.js}"></script>
<script th:src="@{/static/api/login.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/js/vue.min.js}"></script>
<script th:src="@{/static/element/index.js}"></script>
<!-- JAVASCRIPT -->
<script th:src="@{/static/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/static/js/metisMenu.min.js}"></script>
<script th:src="@{/static/js/simplebar.min.js}"></script>
<script th:src="@{/static/js/waves.min.js}"></script>
<script th:src="@{/static/js/jquery.sparkline.min.js}"></script>

<!--Morris Chart-->
<script th:src="@{/static/js/morris.min.js}"></script>
<script th:src="@{/static/js/raphael.min.js}"></script>

<script th:src="@{/static/js/dashboard.init.js}"></script>

<script th:src="@{/static/js/app.js}"></script>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                checked: false,
                buttons: [],
            }
        },
        created() {
        },
        methods: {

            parseTreeJson(treeNodes) {
                for (let i = 0; i < treeNodes.length; i++) {
                    if (treeNodes[i].url) {
                        this.buttons.push(treeNodes[i].url);
                    }
                    let child = treeNodes[i].children;
                    if (child && child.length > 0) {
                        this.parseTreeJson(child);
                    }
                }
            }
        }
    })
</script>

</html>
